<template>
  <div class="search-page">
    <form action="/">
      <van-search
        ref="refVanSearch"
        autofocus
        v-model.trim="kw"
        show-action
        placeholder="请输入搜索关键词"
        background="#3296fa"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isShowResult = false"
      />
    </form>

    <div class="main-content">
      <template v-if="!isShowResult">
        <!-- 历史记录 -->
        <SearchHistory v-if="kw === ''" ref="refHistory" @click-kw="onSearch" />
        <!-- /历史记录 -->
        <!-- 联想建议 -->
        <SearchSuggestion v-else :kw="kw" @click-kw="onSearch" />
        <!-- /联想建议 -->
      </template>
      <!-- 搜索结果 -->
      <SearchResult v-else :kw="kw" />
      <!-- /搜索结果 -->
    </div>
  </div>
</template>

<script>
import SearchHistory from './components/SearchHistory/index'
import SearchSuggestion from './components/SearchSuggestion/index'
import SearchResult from './components/SearchResult/index'
import { setItem, getItem } from '@/utils/storage'
export default {
  name: 'SearchPage',
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult,
  },
  data() {
    return {
      // 是否显示搜索结果
      isShowResult: false,
      // 搜索关键字
      kw: '',
    }
  },
  // watch: {
  //   // 当搜索关键字发生变化时
  //   kw() {
  //     // 需要将搜索结果隐藏，重新显示历史记录或者联想建议
  //     // 数据变了，又会触发一次视图更新（异步）
  //     this.isShowResult = false
  //   },
  // },
  methods: {
    saveKw(kw) {
      // 先从本地拿出来，如果没有，就初始为空数组
      let historyList = getItem('searchHistoryList') || []
      // 再将当前搜索的关键字 kw 插入到数组的最前面
      historyList.unshift(kw)

      // 去重
      historyList = [...new Set(historyList)]

      // 保留前 20 条
      historyList.splice(2)

      // 保存到本地
      setItem('searchHistoryList', historyList)
    },
    // 敲回车（手机键盘上右下角的搜索按钮）
    onSearch(kw) {
      // 如果 kw 为空， !kw 就为 true，那么说明没有输入关键字，直接 return 终止函数向下执行
      if (!kw) return

      // 这句话对于当前组件来说，没什么L用，只不过在监听子组件触发搜索的时候，传过来的关键字需要设置上去
      // 赋值后，触发了侦听器（异步）
      this.kw = kw

      // 将搜索关键字存入到本地存储中
      this.saveKw(kw)

      // 数据发生变化，触发视图更新（异步）
      this.isShowResult = true

      // // 等上一次的渲染完成后再执行
      // this.$nextTick(() => {
      //   // 将搜索结果显示出来
      //   this.isShowResult = true
      // })
    },
    // 点击取消
    onCancel() {
      // 回退到上一页（首页）
      this.$router.back()
    },
  },
  mounted() {
    // this 是当前组件实例
    // this.$refs 是拿到的当前组件实例的 refs
    // this.$refs.refVanSearch 是 van-search 组件实例
    // this.$refs.refVanSearch.$refs 是 van-search 组件实例的 refs
    // console.log(this.$refs.refVanSearch.$refs, 'this.$refs.refVanSearch.$refs')
    // 注意：这个拿不到 van-search 组件实例，拿到的是 div dom 对象
    console.log(this.$refs.refVanSearch, 'this.$refs.refVanSearch')
    // 解决办法：通过原生 webapi 获取页面上的 input 元素，然后获取焦点
    document.querySelector('.van-field__control').focus()
  },
}
</script>

<style scoped lang="less">
.search-page {
  .main-content {
    height: calc(100vh - 108px);
    // 垂直滚动条，如果内容超出该盒子的高度，则出现垂直滚动条，否则不出现
    overflow-y: auto;
  }

  .van-search__action {
    color: #fff;
  }
}
</style>
